<template>
	<view class="page">
		<!-- 手机信息 -->
		<view class="infoBox">
			<view class="imageBox">
				<image :src="imageUrl" mode="aspectFit"></image>
			</view>
			<view class=""
				style="margin-left: 20rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<view class="name">
					型号：{{ product_name }}
				</view>
				<view class="sku">
					规格：{{ product_sku_id }}
				</view>
				<view class="num">
					数量：1
				</view>
			</view>
		</view>
		<!-- 客户信息 -->
		<view class="mainBox">
			<view class="title">个人信息</view>
			<view style="color:#D9767A ;margin-top: 10rpx;">*请填写真实地址，精确到门牌号，如有虚假直接拒单</view>
			<view class="">
				<view class="priceItem">
					<view class="Pitem">
						<view style="width: 130rpx;">
							姓名
						</view>
						<view style="display: flex;">
							<input type="text" v-model="username" placeholder="请输入下单人姓名" style="font-size: 25rpx;" />
						</view>
					</view>
				</view>
			</view>
			<view class="">
				<view class="priceItem">
					<view class="Pitem">
						<view style="width: 130rpx;">
							身份证号
						</view>
						<view class="" style="display: flex;">
							<input type="text" v-model="usernum" placeholder="请输入身份证号码" style="font-size: 25rpx;" />
						</view>
					</view>
				</view>
			</view>
			<view class="">
				<view class="priceItem">
					<view class="Pitem">
						<view style="width: 130rpx;">
							手机号码
						</view>
						<view class="" style="display: flex;">
							<input type="text" v-model="phone" placeholder="请输入手机号码" style="font-size: 25rpx;" />
						</view>
					</view>
				</view>
			</view>
			<view class="">
				<view class="priceItem">
					<view class="Pitem" @click="getAddress">
						<view style="width: 130rpx;">
							收货地址
						</view>
						<view class="" style="display: flex; ">
							<input type="text" v-model="shoeAddress" placeholder="请输入收货地址" style="font-size: 25rpx;" disabled/>
							<!-- {{shoeAddress}} -->
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="">
				<view class="priceItem">
					<view class="Pitem">
						<view style="width: 130rpx;">
							电子邮箱
						</view>
						<view class="" style="display: flex;">
							<input type="text" v-model="e_mail" placeholder="请输入邮箱地址" style="font-size: 25rpx;" />
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<!-- 单位信息 -->
		<!-- <view class="mainBox">
			<view class="title">单位信息</view>
			<view style="color:#D9767A ;margin-top: 10rpx;">*请填写真实工作，核实到虚假工作直接拒单</view>
			<view class="">
				<view class="priceItem">
					<view class="Pitem">
						<view style="width: 130rpx;">
							单位名称
						</view>
						<view style="display: flex;">
							<input type="text" v-model="unit_information.unit_name" placeholder="请输入"
								style="font-size: 25rpx;" />
						</view>
					</view>
				</view>
			</view>
			<view class="">
				<view class="priceItem">
					<view class="Pitem">
						<view style="width: 130rpx;">
							职位
						</view>
						<view class="" style="display: flex;">
							<input type="text" v-model="unit_information.unit_position" placeholder="请输入"
								style="font-size: 25rpx;" />
						</view>
					</view>
				</view>
			</view>
			<view class="">
				<view class="priceItem">
					<view class="Pitem">
						<view style="width: 130rpx;">
							每月收入
						</view>
						<view class="" style="display: flex;">
							<input type="text" v-model="unit_information.unit_income" placeholder="请输入"
								style="font-size: 25rpx;" />
						</view>
					</view>
				</view>
			</view>
			<view class="">
				<view class="priceItem">
					<view class="Pitem">
						<view style="width: 130rpx;">
							单位地址
						</view>
						<view class="" style="display: flex;">
							<input type="text" v-model="unit_information.unit_adress" placeholder="请输入"
								style="font-size: 25rpx;" />
						</view>
					</view>
				</view>
			</view>
		</view> -->

		<!-- 紧急联系人 -->
		<!-- 		<view class="mainBox">
			<view class="title">紧急联系人信息</view>
			<view style="color:#D9767A ;margin-top: 10rpx;">*请预留两名直系亲属联系电话，如有虚假直接拒单</view>
			<view style=" margin: 20rpx 0;">联系人1</view>
			<view class="">
				<view class="priceItem">
					<view class="Pitem">
						<view style="width: 130rpx;">
							姓名
						</view>
						<view style="display: flex;">
							<input type="text" v-model="car_lease_name1" placeholder="请输入" style="font-size: 25rpx;" />
						</view>
					</view>
				</view>
			</view>
			<view class="">
				<view class="priceItem">
					<view class="Pitem">
						<view style="width: 130rpx;">
							关系
						</view>
						<view class="" style="display: flex;">
							<input type="text" v-model="car_lease_relationship1" placeholder="请输入"
								style="font-size: 25rpx;" />
						</view>
					</view>
				</view>
			</view>
			<view class="">
				<view class="priceItem">
					<view class="Pitem">
						<view style="width: 130rpx;">
							手机号码
						</view>
						<view class="" style="display: flex;">
							<input type="text" v-model="car_lease_phone1" placeholder="请输入" style="font-size: 25rpx;" />
						</view>
					</view>
				</view>
			</view>
			<view style=" margin: 20rpx 0;">联系人2</view>
			<view class="">
				<view class="priceItem">
					<view class="Pitem">
						<view style="width: 130rpx;">
							姓名
						</view>
						<view style="display: flex;">
							<input type="text" v-model="car_lease_name2" placeholder="请输入" style="font-size: 25rpx;" />
						</view>
					</view>
				</view>
			</view>
			<view class="">
				<view class="priceItem">
					<view class="Pitem">
						<view style="width: 130rpx;">
							关系
						</view>
						<view class="" style="display: flex;">
							<input type="text" v-model="car_lease_relationship2" placeholder="请输入"
								style="font-size: 25rpx;" />
						</view>
					</view>
				</view>
			</view>
			<view class="">
				<view class="priceItem">
					<view class="Pitem">
						<view style="width: 130rpx;">
							手机号码
						</view>
						<view class="" style="display: flex;">
							<input type="text" v-model="car_lease_phone2" placeholder="请输入" style="font-size: 25rpx;" />
						</view>
					</view>
				</view>
			</view>
		</view> -->


		<!--上传照片 -->
		<view class="upFile" v-if="new_machine == 2">
			<view class="upload_title">*上传手机照片</view>
			<view class="file_box">
				<view class="file_item" @click="obverse(1)">
					<view class="file_item_w100">
						<view class="top_title">产品前屏照</view>
						<view class="img_box">
							<view class="icon" v-if="car_lease_front_photo == ''">
								<view class="h_tar"></view>
								<view class="l_tar"></view>
							</view>
							<image v-else :src="car_lease_front_photo" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="file_item" @click="obverse(2)">
					<view class="file_item_w100">
						<view class="top_title">产品后盖照</view>
						<view class="img_box">
							<view class="icon" v-if="car_lease_back_photo == ''">
								<view class="h_tar"></view>
								<view class="l_tar"></view>
							</view>
							<image :src="car_lease_back_photo" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="file_item" @click="obverse(3)">
					<view class="file_item_w100">
						<view class="top_title">上边框照</view>
						<view class="img_box">
							<view class="icon" v-if="car_lease_border_top == ''">
								<view class="h_tar"></view>
								<view class="l_tar"></view>
							</view>
							<image :src="car_lease_border_top" mode="aspectFit"></image>
						</view>

					</view>
				</view>
				<view class="file_item" @click="obverse(4)">
					<view class="file_item_w100">
						<view class="top_title">下边框照</view>
						<view class="img_box">
							<view class="icon" v-if="car_lease_bottom == ''">
								<view class="h_tar"></view>
								<view class="l_tar"></view>
							</view>
							<image :src="car_lease_bottom" mode="aspectFit"></image>
						</view>

					</view>
				</view>
				<view class="file_item" @click="obverse(5)">
					<view class="file_item_w100">
						<view class="top_title">左边框照</view>
						<view class="img_box">
							<view class="icon" v-if="car_lease_border_left == ''">
								<view class="h_tar"></view>
								<view class="l_tar"></view>
							</view>
							<image :src="car_lease_border_left" mode="aspectFit"></image>
						</view>

					</view>
				</view>
				<view class="file_item" @click="obverse(6)">
					<view class="file_item_w100">
						<view class="top_title">右边框照</view>
						<view class="img_box">
							<view class="icon" v-if="car_lease_border_right == ''">
								<view class="h_tar"></view>
								<view class="l_tar"></view>
							</view>
							<image :src="car_lease_border_right" mode="aspectFit"></image>
						</view>

					</view>
				</view>
				<view class="file_item" @click="obverse(7)">
					<view class="file_item_w100">
						<view class="top_title">串码照</view>
						<view class="img_box">
							<view class="icon" v-if="car_lease_string_code == ''">
								<view class="h_tar"></view>
								<view class="l_tar"></view>
							</view>
							<image :src="car_lease_string_code" mode="aspectFit"></image>
						</view>

					</view>
				</view>
				<view class="file_item" @click="obverse(8)">
					<view class="file_item_w100">
						<view class="top_title">爱思主页</view>
						<view class="img_box">
							<view class="icon" v-if="car_lease_aisi == ''">
								<view class="h_tar"></view>
								<view class="l_tar"></view>
							</view>
							<image :src="car_lease_aisi" mode="aspectFit"></image>
						</view>

					</view>
				</view>
				<view class="file_item" @click="obverse(9)">
					<view class="file_item_w100">
						<view class="top_title">爱思验机报告</view>
						<view class="img_box">
							<view class="icon" v-if="car_lease_sesame_seed == ''">
								<view class="h_tar"></view>
								<view class="l_tar"></view>
							</view>
							<image :src="car_lease_sesame_seed" mode="aspectFit"></image>
						</view>
					</view>
				</view>
			</view>
		</view>




		<!-- 合影 -->
		<!-- <view class="share_box">
			<view class="fon_w">推广厂商合影</view>
			<view class="color_r">*请上传你与商铺店主的合影</view>
			<view class="file_box">
				<view class="file_item" @click='obverse(10)'>
					<view class="file_item_w100">
						<view class="img_box">
							<view class="icon" v-if="car_lease_merchant_group_photo == ''">
								<view class="h_tar"></view>
								<view class="l_tar"></view>
							</view>
							<image :src="car_lease_merchant_group_photo" mode="aspectFit"></image>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 底部  确定 -->
		<view class="botBox">
			<view class="submitBtn" @click="submitOrder">
				确定订单
			</view>
		</view>
		<view class="" v-if="ocrData" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
			<view class="" @click="imageUpload">
				<image v-if="!id_image_zm" src="../../static/sfzrx.png" mode="widthFix" style="width: 450rpx;height: 200rpx;"></image>
				<image v-else :src="id_image_zm" mode="aspectFit" style="width: 450rpx;height: 200rpx;"></image>
			</view>
			<view class="" style="margin-top: 20rpx;" @click="imageUpload2">
				<image v-if="!id_image_fm" src="../../static/sfzbm.png" mode="widthFix" style="width: 450rpx;height: 200rpx;"></image>
				<image v-else :src="id_image_fm" mode="aspectFit" style="width: 450rpx;height: 200rpx;"></image>
			</view>
			<Upload ref="upload1" @getImgs="getImgsFunc"></Upload>
			<Uploads ref="upload2" @getImgs="getImgsFunc1"></Uploads>
		</view>
		<view class="" v-else style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
			<view class="" >
				<image  :src="sfzpositive"  @click="imageUpload" mode="aspectFit" style="width:450rpx;height: 200rpx;"></image>
			</view>
			<view class="" style="margin-top: 20rpx;">
				<image  :src="sfzback" mode="aspectFit" @click="imageUpload2" style="width: 450rpx;height: 200rpx;"></image>
			</view>
			<Upload ref="upload1" @getImgs="getImgsFunc"></Upload>
			<Uploads ref="upload2" @getImgs="getImgsFunc1"></Uploads>
		</view>
		<!-- 人脸认证 -->
		<Rellianrz :ids="ddids" ref="renlianrz"></Rellianrz>
		
		<view style="height: 150rpx;"></view>
	</view>
</template>
<script>
	import {
		pay
	} from '@/common/pay.js';
	import Upload from '@/components/upload/uploadOne2.vue';
	import Uploads from '@/components/upload/uploadOne2.vue';
	import Rellianrz from '@/components/rellianrz.vue';
	export default {
		components: {
			Upload,
			Uploads,
			Rellianrz
		},
		data() {
			return {
				// 邮箱地址
				e_mail: '',
				// 收货地址
				address: {},
				shoeAddress: '',
				// 姓名
				username: '',
				// 身份证
				usernum: '',
				phone: '',
				options: {}, // 可以判断是否是新机
				imageUrl: '',
				product_name: '',
				order_id: '',
				bill_id: '',
				product_sku_id: '',
				// 是否是新机
				new_machine: '',
				frontal: [],
				coupon_id: 0,
				// 紧急联系人姓名1
				car_lease_name1: '',
				// 紧急联系人关系1 
				car_lease_relationship1: '',
				//紧急联系人号码1 
				car_lease_phone1: '',
				// 紧急联系人姓名2 
				car_lease_name2: '',
				// 紧急联系人关系2 
				car_lease_relationship2: '',
				// 紧急联系人号码2 
				car_lease_phone2: '',
				// 厂商合影
				car_lease_merchant_group_photo: '',
				// 产品前屏照
				car_lease_front_photo: '',
				//    产品后盖照 
				car_lease_back_photo: '',
				// 上边框照
				car_lease_border_top: '',
				// 下边框照
				car_lease_bottom: '',
				// 左边框照 
				car_lease_border_left: '',
				// 右边框照  
				car_lease_border_right: '',
				// 串码照 
				car_lease_string_code: '',
				// 爱思主页
				car_lease_aisi: '',
				// 爱思验机报告
				car_lease_sesame_seed: '',
				//单位信息
				unit_information: {
					unit_name: '',
					unit_position: '',
					unit_income: '',
					unit_adress: ''

				},
				//判断ocr身份证是否上传上去了
				ocrData:false,
				id_image_zm:"",
				id_image_fm:"",
				sfzback: "",
				sfzpositive: "",
				ddids:'', //orderid
			}
		},
		onLoad(options) {
			console.log(options.product_sku_id, '=---options');
			this.options = options
			this.new_machine = options.new_machine
			this.getShopInfo(this.options)
			console.log(uni.getStorageSync('shop_supplier_id'), '--------------shop_id');
			this._get('user.user/detail', {},
				(res) => {
					console.log(res.data.userInfo, 'res.data.userInfo')
					this.username = res.data.userInfo.username
					this.usernum = res.data.userInfo.usernum
					// this.phone = res.data.userInfo.mobile2
				}
			);
		},
		methods: {
			// 调用子组件
			imageUpload(){
				this.$refs.upload1.chooseImageFunc("嘿嘿嘿");
			},
			imageUpload2(){
				this.$refs.upload2.chooseImageFunc("嘿嘿嘿");
			},
			/*获取上传的图片正面*/
			getImgsFunc(e) {
				console.log(e,'--------')
				let self = this;
				if (e && typeof(e) != 'undefined') {
					self.sfzpositive = e[0].file_path;
					self.id_image_zm = e[0].file_path;
					self.isUpload = false;
					self._post('esign.eqb/ocrIdCard', {
						idcard_url: e[0].file_path,
					}, function(res) {
						// self.formData.name = res.data.name
						// self.formData.idNo = res.data.idNo
						self.username = res.data.name
						self.usernum = res.data.idNo
					})
				}
			},
			/*获取上传的图片反面*/
			getImgsFunc1(e) {
				let self = this;
				if (e && typeof(e) != 'undefined') {
					self.sfzback = e[0].file_path;
					self.id_image_fm = e[0].file_path;
					self.isUpload1 = false;
				}
			},
			// 获取商品详情  商品图片 标题  275_485_1
			getShopInfo(options) {
				let self = this
				self._post('product.product/detail', {
					app_id: 10001,
					product_id: options.product_id,
					url: '',
					visitcode: ''
				}, res => {
					self.imageUrl = res.data.detail.image[0].file_path
					self.product_name = res.data.detail.product_name
					res.data.specData.spec_attr.forEach(item => {
						if (item.group_name == '内存') {
							console.log(item.spec_items, 'spec_items')
							item.spec_items.forEach(item1 => {
								// let ceshi = self.options.product_sku_id.replace('_1', '')
								let ceshi = self.options.product_sku_id.split('_')[0]
								if (item1.item_id == ceshi) {
									self.product_sku_id = item1.spec_value
								}
							})
						}
					})
					
					if(!res.data.user.sfzback && !res.data.user.sfzpositive){
						self.ocrData = true;
					}else{
						self.sfzback = res.data.user.sfzback;
						self.sfzpositive = res.data.user.sfzpositive;
					}
				})
			},
			// 获取地址和手机号
			getAddress() {
				my.getAddress({
					success: (res) => {
						if (res.resultStatus == 9000) {
							this.address.name = res.result.fullname
							this.address.phone = res.result.mobilePhone
							this.address.province = res.result.prov
							this.address.city = res.result.city
							this.address.region = res.result.area
							this.address.detail = res.result.address
							this.shoeAddress = this.address.province + this.address.city + this.address
								.region + '-' + this.address.detail
							this.phone = this.address.phone
						} else {
							console.log("getAddress cancel", JSON.stringify(res));
						}
					},
					fail: (res) => {
						my.alert({
							title: "getAddress fail",
							content: JSON.stringify(res)
						});
					}
				});
			},
			// 点击上传手机全方位照片
			uploadFile(item, i) {
				let self = this
				let params = {
					token: uni.getStorageSync('token'),
					app_id: '10001',
					type: 9
				};
				uni.uploadFile({
					url: 'https://tongyizu.hzrjkf.com/index.php/api/file.upload/image',
					filePath: item,
					name: 'iFile',
					formData: params,
					success: (uploadFileRes) => {
						console.log(JSON.parse(uploadFileRes.data).data.file_path, 'uploadFileRes', i)
						switch (i) {
							case 1:
								self.car_lease_front_photo = JSON.parse(uploadFileRes.data).data.file_path
								break;
							case 2:
								self.car_lease_back_photo = JSON.parse(uploadFileRes.data).data.file_path
								break;
							case 3:
								self.car_lease_border_top = JSON.parse(uploadFileRes.data).data.file_path
								break;
							case 4:
								self.car_lease_bottom = JSON.parse(uploadFileRes.data).data.file_path
								break;
							case 5:
								self.car_lease_border_left = JSON.parse(uploadFileRes.data).data.file_path
								break;
							case 6:
								self.car_lease_border_right = JSON.parse(uploadFileRes.data).data.file_path
								break;
							case 7:
								self.car_lease_string_code = JSON.parse(uploadFileRes.data).data.file_path
								break;
							case 8:
								self.car_lease_aisi = JSON.parse(uploadFileRes.data).data.file_path
								break;
							case 9:
								self.car_lease_sesame_seed = JSON.parse(uploadFileRes.data).data.file_path
								break;
							case 10:
								self.car_lease_merchant_group_photo = JSON.parse(uploadFileRes.data).data
									.file_path
								break;
							default:
								break;
						}
						// if (type == 1) {
						// 	this.type1.push(JSON.parse(uploadFileRes.data).data.file_path);
						// } else if (type == 2) {
						// 	this.type2 = []
						// 	this.type2.push(JSON.parse(uploadFileRes.data).data.file_path);
						// } else if (type == 3) {
						// 	this.type3 = []
						// 	this.type3.push(JSON.parse(uploadFileRes.data).data.file_path);
						// } else if (type == 4) {
						// 	this.type4 = []
						// 	this.type4.push(JSON.parse(uploadFileRes.data).data.file_path);
						// } else if (type == 5) {
						// 	this.type5.push(JSON.parse(uploadFileRes.data).data.file_path);
						// }

						uni.previewImage({
							urls: JSON.parse(uploadFileRes.data).data.file_path,
							longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data
										.index + 1) + '张图片');
								},
								fail: function(err) {
									console.log(err.errMsg);
								}
							}
						});
					}
				});
			},
			obverse(i) {
				let self = this
				let params = {
					token: uni.getStorageSync('token'),
					app_id: '10001',
					type: 9
				};
				console.log(params);
				uni.chooseImage({
					count: 1, //默认9
					success: (chooseImageRes) => {
						console.log(chooseImageRes, 'chooseImageRes');
						this.uploadFile(chooseImageRes.tempFilePaths[0], i)
					}
				});
			},
			// 预览
			// previewImage(url) {
			// 	let urlArrs = []
			// 	urlArrs.push(url)
			// 	uni.previewImage({
			// 		urls: urlArrs,
			// 		longPressActions: {
			// 			itemList: ['发送给朋友', '保存图片', '收藏'],
			// 			success: function(data) {
			// 				console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data
			// 					.index + 1) + '张图片');
			// 			},
			// 			fail: function(err) {
			// 				console.log(err.errMsg);
			// 			}
			// 		}
			// 	});
			// },
			// 提交订单
			// 提交订单
			submitOrder() {
				let self = this
				// 前置判断
				if (!self.username) {
					uni.showToast({
						title: "请填写下单人姓名！",
						duration: 1000,
						position: 200,
					})
					return
				}
				if (!self.usernum) {
					uni.showToast({
						title: "请填写下单人身份证！",
						duration: 1000,
						position: 200,
					})
					return
				}
				if (!self.phone) {
					uni.showToast({
						title: "请填写手机号码！",
						duration: 1000,
						position: 200,
					})
					return
				}
				// if (!self.e_mail) {
				// 	uni.showToast({
				// 		title: "请填写邮箱地址！",
				// 		duration: 1000,
				// 		position: 200,
				// 	})
				// 	return
				// }
				if (!self.address) {
					uni.showToast({
						title: "请填写收货地址！",
						duration: 1000,
						position: 200,
					})
					return
				}
				// 请求的参数
				let params = {
					order_type: 1,
					delivery: self.delivery,
					store_id: self.store_id,
					coupon_id: self.coupon_id,
					// is_use_points: self.is_use_points,
					is_use_points: true,
					pay_source: self.getPlatform(),
					address: self.address,
					car_lease_price: self.options.price,
					// total_credit_limit_of_huabei: self.options.total_credit_limit_of_huabei,
					// sesame_credit_score: self.options.sesame_credit_score,
					// down_payment: self.options.down_payment, // 首付配置id
					car_lease: self.options.car_lease,
					e_mail: self.e_mail,
					username: self.username,
					usernum: self.usernum,
					phone: self.phone,
					old_and_new: self.options.old_and_new,
					is_fast_order:0, //快速订单1  其他订单 0
					supplier: {
						1: {
							coupon_id: 0,
							delivery: "10",
							store_id: 0,
							remark: ""
						}
					}
				};
				self._post(
					'order.order/buy', {
					params: JSON.stringify(
						Object.assign({}, params, {
							product_id: self.options.product_id,
							product_num: self.options.product_num,
							product_sku_id: self.options.product_sku_id,
							zhouqi : self.options.zhouqi,
							down_payment_ratio : self.options.down_payment_ratio
						})
					)
				},
					function (res) {
						self.order_id = res.data.order_id[0]
						// 获取订单详情
						self.getOrderDetail()
					}
				);
			},
			// 获取订单详情
			getOrderDetail() {
				let self = this
				self._get('user.order/detail', {
						order_id: self.order_id,
						pay_source: self.getPlatform()
					},
					function(res) {
						// self.bill_id = res.data.orderBill[0].bill_id
						// self.payyj()
						uni.navigateTo({
							url: '/pages/order/order-detail?order_id=' + self.order_id
						})
					}
				)
			},


			payyj() {
				let self = this
				self._post('/user.order/billPay', {
						bill_id: self.bill_id
					},
					function(res) {
						pay(res, self, self.paySuccess, self.payError);
					})
			}
		},
		created() {

		},
		mounted() {},

	}
</script>

<style lang="less">
	.page {
		// background-color: #f9ffff;
	}

	.mainBox {
		background-color: #ffffff;
		// box-shadow: 3rpx 3rpx 3rpx 3rpx hsl(0deg 10% 87%);
		// height: 450rpx;
		margin: 30rpx 20rpx;
		padding: 20rpx 30rpx;
	}

	.title {
		color: #000000;
		font-size: 27rpx;
		font-weight: 800;
	}

	.infoBox {
		// height: 150rpx;
		display: flex;
		margin: 30rpx 20rpx;
		padding: 20rpx 60rpx;
		background-color: #ffffff;
	}

	.imageBox {
		width: 130rpx;
		height: 130rpx;
	}

	.imageBox image {
		width: 100%;
		height: 100%;
	}

	.botBox {
		width: 100%;
		height: 150rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.submitBtn {
		width: 90%;
		border-radius: 40rpx;
		height: 80rpx;
		background-color: #3FD2CC;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
	}

	.priceItem {
		width: 100%;
		height: 80rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;

		margin-top: 15rpx;
	}

	.Pitem {
		// background-color: #f6f6f6;
		border-radius: 10rpx;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		align-items: center;
		margin-top: 15rpx;

		view {
			font-size: 28rpx;
		}
	}


	.share_box {
		margin: 30rpx 20rpx;
		padding: 20rpx;
		background-color: #fff;

		.fon_w {
			font-size: 28rpx;
			font-weight: bold;
		}

		.color_r {
			font-size: 20rpx;
			color: #DC7D7E;
			margin-top: 10rpx;
			margin-bottom: 30rpx;
		}
	}

	.upFile {
		margin: 30rpx 20rpx;
		padding: 20rpx;
		background-color: #fff;

		.upload_title {
			font-size: 28rpx;
			font-weight: bold;
		}
	}


	// 上传文件
	.file_box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 20rpx;


		.file_item {
			width: 215rpx;
			background-color: #F6F6F6;
			overflow: hidden;
			margin: 5rpx 0;
			border-radius: 15rpx;

			.file_item_w100 {
				// width: 90vw;

				.top_title {
					width: 220rpx;
					text-align: center;
					padding: 10rpx 0;
					color: #7E8DD8;
					background-color: #EBEDF9;
				}

				.img_box {
					width: 215rpx;
					height: 215rpx;
					overflow: hidden;
					/* 如果需要隐藏超出部分 */
					display: flex;
					justify-content: center;
					/* 水平居中 */
					align-items: center;
					/* 垂直居中，结合flex使用 */
					position: relative;


					.icon {
						position: absolute;
						top: 75rpx;
						left: 76rpx;

						.h_tar {
							height: 8rpx;
							width: 60rpx;
							background-color: rgba(0, 0, 0, .4);
						}

						.l_tar {
							height: 8rpx;
							width: 60rpx;
							background-color: rgba(0, 0, 0, .4);
							transform: translateY(-8rpx) rotate(90deg);
						}
					}

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>